<template>
  <div>
    <div class="heide" style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="inquire.leirong" class="input-with-select">
        <el-select v-model="inquire.lei" slot="prepend" placeholder="请选择">
          <el-option label="名称" value="commodityName"></el-option>
          <el-option label="价格" value="price"></el-option>
          <el-option label="产地" value="orgin"></el-option>
          <el-option label="包装" value="package"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="inquirecommodity(inquire)"></el-button>
      </el-input>
    </div>
    <el-table :data="commodity" style="width: 100%">
      <el-table-column align="center" prop="_id" label="商品ID" width="220"></el-table-column>
      <el-table-column align="center" prop="image" label="商品图片" width="100">
        <template slot-scope="scope">
          <img
            :src="'http://localhost:3003/images/'+scope.row.image"
            alt
            style="width: 100px;height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="commodityName" label="商品名称" width="180"></el-table-column>
      <el-table-column align="center" prop="price" label="商品价格" width="100"></el-table-column>
      <el-table-column align="center" prop="orgin" label="商品产地" width="100"></el-table-column>
      <el-table-column align="center" prop="package" label="商品包装" width="100"></el-table-column>
      <el-table-column align="center" prop="amount" label="数量" width="180"></el-table-column>
      <el-table-column align="center" prop="inventoryNumbers" label="库存" width="100"></el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row._id)">编辑</el-button>
          <el-button type="text" @click="open(scope.row._id)">
            <el-button size="mini" type="danger">删除</el-button>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- //修改商品 -->
    <el-dialog title="修改商品" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.commodityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品产地" :label-width="formLabelWidth">
          <el-input v-model="form.orgin" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品包装" :label-width="formLabelWidth">
          <el-input v-model="form.package" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" :label-width="formLabelWidth">
          <el-input v-model="form.amount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存" :label-width="formLabelWidth">
          <el-input v-model="form.inventoryNumbers" autocomplete="off"></el-input>
        </el-form-item>
        <template>
          <el-upload action="/merchant/img" list-type="picture-card" :on-success="chuan">
            <i class="el-icon-plus"></i>
          </el-upload>
          <img
            :src="'http://localhost:3003/images/'+form.image"
            alt
            style="width: 100px;height: 100px"
          />
        </template>
        <el-upload
          class="upload-demo"
          action="/merchant/imgs"
          :on-success="chuan1"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit(form)">确 定</el-button>
      </div>
    </el-dialog>
    <el-button-group>
      <el-button type="primary" @click="head">首页</el-button>
      <el-button type="primary" icon="el-icon-arrow-left" @click="pageup">上一页</el-button>
      <el-button type="primary" @click="overleaf">
        下一页
        <i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>
      <el-button type="primary" @click="footer">尾页</el-button>
    </el-button-group>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
var { mapState, mapActions } = createNamespacedHelpers("commodity");
export default {
  data() {
    return {
      form: {},
      inquire: {
        lei: "",
        leirong: ""
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "80px"
    };
  },
  created() {
    this.getcommodityactions();
  },
  methods: {
    ...mapActions([
      "inquirecommodity",
      "overleaf",
      "getcommodityactions",
      "deltcommodity",
      "updatecommodity",
      "submitcommodity",
      "pageup",
      "head",
      "footer"
      // 'updateInventoryAsync'
    ]),
    //上传图片
    chuan(response) {
      this.form.image = response.img;
    },
    //上传详情图片
    chuan1(response) {
      // "detailsImages/"+
      // console.log(response[0])
        this.form.particularsImg = [...this.form.particularsImg,"detailsImages/"+response[0]];
    },
    async handleEdit(row) {
      var data = await this.updatecommodity(row);
      this.form = data;
      this.dialogFormVisible = true;
    },
    //提交修改数据
    async submit(data) {
      this.dialogFormVisible = false;
      this.submitcommodity(data);
      this.getcommodityactions();
    },
    async handleDelete(row) {
      var a = await this.deltcommodity(row);
    },
    //
    open(data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message(
            {
              type: "success",
              message: "删除成功!"
            },
            this.handleDelete(data),
            this.getcommodityactions()
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(fileList) {
      this.form.particularsImg = this.form.particularsImg.filter(imex => {
        return imex != "detailsImages/"+fileList.name;
      });
    }
  },
  computed: {
    ...mapState(["commodity"]),
    fileList() {
      var img = [];
      if (this.form.particularsImg) {
        for (var i = 0; i < this.form.particularsImg.length; i++) {
          img.push({
            name: this.form.particularsImg[i].split("/")[1],
            url: `${this.form.particularsImg[i]}`
          });
        }
      } else {
        console.log(11);
      }
      return img;
    }
  }
};
</script>

<style scoped>
.cell {
  text-align: center;
}
.heide {
  width: 400px;
  margin: 30px auto;
}
</style>